<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Simple Examples</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<style>
		/*	input.t {border:1px solid #fff;background:#fff; font-size:14px;padding-left:5px; height:30px; line-height:30px; width:30px} */
		
		input.s {
			border: 1px solid #369;
			background: #fff;
			height: 30px;
			line-height: 30px;
			width: 30px;
		}
	</style>

	<body>

		<video onload="handleResize()" src="images/video.mp4" width="320" height="240" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="images/duigou.jpg" autoplay="false" preload="none" controls="controls">
		</video>

		<script>
			function handleResize() {

				var sWidth = 9

				var sHeight = 16

				var width = window.innerWidth

				var height = window.innerHeight

				var marginTop = height - (width * sHeight) / sWidth

				marginTop = Math.round(marginTop)

				if(marginTop < -2) {

					video.$wrapper.css('marginTop', marginTop / 2 + 'px')

				} else {

					video.$wrapper.css('marginTop', '0')

				}

			}

			$(".t").blur(function() {
				$(".xiugai").trigger("click");
			});

			$(".xiugai").click(function() {

				$(this).attr("readOnly", true);
				$(this).addClass("t").removeClass("s");

			});

			$(".t").dblclick(function() {
				l
				$(this).attr("readOnly", false);
				$(this).attr("style", "border:1px solid #fff;height:30px; line-height:30px; width:40px; text-align: center;");

			});
		</script>
	</body>

</html>